<template>
  <div class="work_list_info_detail" :class={empty_status:isLoading} v-loading="isLoading">
    <one-title title="工单信息总览" @refreshData="init"></one-title>
    <empty-page v-if="isEmpty&&!isLoading"></empty-page>
    <div class="page_container fixed_top_56" v-if="!isEmpty&&!isLoading">
      <message-list :title="titles[0]" :index="1" :listData="workorder"></message-list>
      <!--<MessageList :title="titles[1]" :index="2" :listData="workorderMaterial"></MessageList>-->
      <message-list :title="titles[1]" :index="3" :listData="workorderTechProc"></message-list>
      <div class="table_container">
        <div class="message_table padding_table">
          <span class="table_title">工序信息表</span>
          <el-table
            ref="workorderStageTab"
            :data="workorderWorkstageList"
            tooltip-effect="dark"
            height="440"
            border
            :row-class-name="({row}) => !selectData.some((item) => item.id === row.id) || 'line_selected'"
            @row-click="(row) => $refs.workorderStageTab.toggleRowSelection(row)"
            @selection-change="handleSelectionChange"
            @cell-mouse-enter="enterRow"
            @cell-mouse-leave="leaveRow"
          >
            <el-table-column
              type="selection"
              width="40"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="sort"
              label="工序序号"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="workstageNumber"
              label="工序编号"
              width="200"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="workstageName"
              :resizable="false"
              label="工序名称"
              width="200"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="message_table padding_table message_table2">
          <span class="table_title">工序上料表</span>
          <el-table
            :data="selectWorkorderMaterial"
            height="440"
            border
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="workstageNumber"
              label="工序编号"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="materialNumber"
              label="物料编码"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="materialName"
              label="物料名称"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="quantity"
              :resizable="false"
              label="装配数量"
              align="center"
              width="100"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="message_table message_table3">
          <span class="table_title">工序资源表</span>
          <el-table
            :data="selectWorkorderWorkstageResourceList"
            height="440"
            border
            :row-class-name="tableRowClassName"
          >
            <el-table-column
              prop="workstageNumber"
              label="工序编号"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="resourceNumber"
              label="资源编号"
              width="120"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="resourceName"
              label="资源名称"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="quantity"
              :resizable="false"
              label="资源数量"
              align="center"
              width="100"
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TwoTitle from '@/components/TwoTitle'
import MessageList from './components/MessageList'
import EmptyPage from '@/components/EmptyPage'

export default {
  name: 'workListInfoDetail',
  data () {
    return {
      isEmpty: false, // 是否为空数据
      isLoading: this.$route.query.id, // 数据加载中
      titles: ['工单信息表', '工艺信息表'],
      workorder: {}, // 工单信息表数据
      workorderTechProc: {}, // 工艺信息列表
      workorderWorkstageList: [], // 工序信息列表
      workorderMaterialList: [], // 工序上料列表
      workorderWorkstageResourceList: [], // 工序资源列表
      selectData: [], // 所选工艺信息列表
      workorderId: String, // 滑过工序表行时当前工序ID
      selectWorkorderMaterial: [], // 所选工序上料列表
      selectWorkorderWorkstageResourceList: [] // 所选工序资源列表
    }
  },
  computed: {
  },
  mounted() {
    this.init()
  },
  components: {
    TwoTitle,
    MessageList,
    EmptyPage
  },
  methods: {
    // 数据初始化
    init() {
      let id = this.$route.query.id
      let postData = {
        method: 'get',
        url: 'a/workorder/workorder/getworkorder/' + id,
        module: 'workListReceive',
        state: 'overviewDetail'
      }
      this.isLoading = true
      this.$store.dispatch('saveData', postData).then((res) => {
        this.workorder = res.workorder || {}
        this.workorderTechProc = res.workorderTechProc || {}
        this.workorderWorkstageList = res.workorderWorkstageList || []
        this.workorderMaterialList = res.workorderWorkstageMaterialList || []
        this.workorderWorkstageResourceList = res.workorderWorkstageResourceList || []
        if (!id || !res) { this.isEmpty = true }
        this.setTableSelect(this.workorderWorkstageList)
      }).catch(() => {
        this.isEmpty = true
      }).finally(() => {
        this.isLoading = false
      })
    },
    /**
     * 设置工序信息表默认全选
     * @param list 工序信息列表数据
     */
    setTableSelect(list) {
      setTimeout(() => {
        list.forEach((item) => {
          this.$refs.workorderStageTab.toggleRowSelection(item)
        });
        this.selectData = list
        this.calcSelectWorkorderMaterial()
      })
    },
    /**
     * 工序信息表勾选
     * @param val
     */
    handleSelectionChange(val) {
      this.selectData = val
      this.calcSelectWorkorderMaterial()
    },
    /**
     * 获取所选工序下的工序上料列表和工序资源列表
     */
    calcSelectWorkorderMaterial() {
      let selectList1 = []
      let selectList2 = []
      this.selectData.forEach((value) => {
        this.workorderMaterialList.forEach((item) => {
          if (value.id === item['workorderWorkstageId']) {
            selectList1.push(item)
          }
        })
        this.workorderWorkstageResourceList.forEach((item) => {
          if (value.id === item['workorderWorkstageId']) {
            selectList2.push(item)
          }
        })
      })
      this.selectWorkorderMaterial = selectList1
      this.selectWorkorderWorkstageResourceList = selectList2
    },
    /**
     * 鼠标滑过工序表行时，标注并调整所辖的物料和资源子集背景色和scroll位置
     * @param row 行对象
     */
    enterRow(row) {
      this.workorderId = row.id
      /*let container1 = this.$el.querySelector('.message_table2 .el-table__body-wrapper')
      let position1 = this.calcScrollPosition(this.selectWorkorderMaterial, this.workorderId, container1.scrollTop, container1.scrollHeight)
      container1.scrollTop = position1
      let container2 = this.$el.querySelector('.message_table3 .el-table__body-wrapper')
      let position2 = this.calcScrollPosition(this.selectWorkorderWorkstageResourceList, this.workorderId, container2.scrollTop, container2.scrollHeight)
      container2.scrollTop = position2*/
    },
    /**
     * 鼠标离开工序表行
     */
    leaveRow() {
      this.workorderId = ''
      /* this.workorderId = ''
      let container1 = this.$el.querySelector('.message_table2 .el-table__body-wrapper')
      container1.scrollTop = 0
      let container2 = this.$el.querySelector('.message_table3 .el-table__body-wrapper')
      container2.scrollTop = 0 */
    },
    /**
     * 添加table行样式
     * @param row
     * @returns {string}
     */
    tableRowClassName({row}) {
      if (this.workorderId === row.workorderWorkstageId) {
        return 'has_parent'
      }
    },
    /**
     * 计算工序上料表、工序资源表的sroll位置
     * @param list
     * @param id
     * @param scrollTop
     * @param scrollHeight
     * @returns {number}
     */
    calcScrollPosition(list, id, scrollTop, scrollHeight) {
      let index
      let result = 0
      list.forEach((item, i) => {
        if (list[i]['workorderWorkstageId'] === id && !index) {
          index = i
        }
      })
      let itemHeight = (index + 1) * 40
      let topDiffer = itemHeight - scrollTop
      let currentDeffer = scrollHeight - itemHeight
      if (topDiffer <= 0) {
        result = scrollTop + topDiffer
      } else {
        if (topDiffer >= 400 && currentDeffer <= 400) {
          result = scrollHeight
        }
        if (topDiffer >= 400 && currentDeffer > 400) {
          result = topDiffer + 400
        }
        if (topDiffer < 400 && currentDeffer >= topDiffer) {
          result = scrollTop + topDiffer
        }
        if (topDiffer < 400 && currentDeffer < topDiffer) {
          result = scrollTop + currentDeffer
        }
      }
      return result
    }
  }
}
</script>

<style lang="less">
  .work_list_info_detail{
    &.empty_status{
      height: 100%!important;
    }
    .page_container{
      padding:20px;
      padding-bottom: 40px;
    }
    .table_container{
      overflow: hidden;
      padding: 12px 11px 18px 18px;
      border: solid 1px #dbe1e8;
    }
    .message_table{
      width: 33%;
      float: left;
      box-sizing: border-box;
      .table_title{
        color:#333;
        font-size:12px;
        line-height: 30px;
      }
      &.padding_table{
        padding-right: 10px;
      }
      .el-table--border{
        border-top:none;
      }
      .is_span{
        background-color: #2196f3;
        border-radius: 2px;
        color:#fff;
      }
      .no_span{
        background-color: #7e8e9f;
        border-radius: 2px;
        color:#fff;
      }
      .el-table__body-wrapper::-webkit-scrollbar {
        /*滚动条*/
        width: 17px;
        height: 17px;
        cursor:pointer;
        margin-left: 4px;
      }
      .el-table__body-wrapper::-webkit-scrollbar-thumb {
        /*小方块*/
        border-radius: 16px;
        -webkit-box-shadow: inset 0 0 5px #eee;
        background:#dbe1e8;
        cursor:pointer;
        border:5px solid #fff;
      }
      .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
        cursor:pointer;
      }
      .el-table__body-wrapper::-webkit-scrollbar-track {
        /*轨道*/
        width: 17px;
        background: #fff;
      }
      .el-table__body-wrapper::-webkit-scrollbar-track:hover{
        cursor:pointer;
      }
    }
    .el-table-column--selection .cell{
      padding-right: 0;
      padding-left: 0!important;
    }
  }
  .has_parent td{
    background-color: #e5f7ff!important;
  }
</style>
